<template>
	<div class="app-container">
		<div class="app-box">
		<div class="p-detail">
			<p>
				<i class="iconfont icon-baoxianchanpin now"></i>&nbsp;&nbsp; <span v-if="info.name!=''">用户：{{info.name}}</span><span v-if="info.phoneNumber!=''" style="font-size: 16px;">（{{info.phoneNumber}}）</span>
				<span v-if="info.name==''">用户：-</span><span v-if="info.phoneNumber==''">（-）</span>
				<span class="returnbtn">
					<el-button style="float: right;" size='mini' @click="back">返回</el-button>
				</span>
			</p>
			<div class="d-box">
				<p>
					<span>身份证号：</span>
					<span class="d-setc marginRight30" v-if="info.identityCard!=''">{{info.identityCard}}</span>
					<span class="d-setc marginRight30" v-if="info.identityCard==''">{{info.identityCard}}</span>
					<span>绑定银行卡：</span>
					<span class="d-setc marginRight30"><l v-if="info.bankName!=null">{{info.bankName}}</l><l v-if="info.bankCode!=''">（{{info.bankCode}}）</l> </span>
					<span class="d-setc marginRight30"><l v-if="info.bankName==null">-</l><l v-if="info.bankCode==''">-</l> </span>
					<span>注册状态：</span>
					<span class="d-setc marginRight30" v-if="info.registrationState==0">成功</span>
					<span class="d-setc marginRight30" v-if="info.registrationState==1">待完善</span>
				</p>
				<p>
					<span>账户余额：</span>
					<span class="d-setc marginRight30" v-if="info.balance!=''">{{info.balance | moneydou}}</span>
					<span class="d-setc marginRight30" v-if="info.balance==''">-</span>
					<span>注册日期：</span>
					<span class="d-setc marginRight30" v-if="info.creationTime!=''">{{info.creationTime}}</span>
					<span class="d-setc marginRight30" v-if="info.creationTime==''">-</span>
				</p>
				
			</div>
		</div>
		
		<!--搜索-->
		<div class="searchFormwp">
			<el-form :model='searchForm' class='searchForm' label-width='70px'  label-position='left'>
				<div class="forminputdiv marginRight22">
				<el-form-item label="时　间">
    				<div class="block">
					    <!--<el-date-picker class="wd300" format='yyyy-MM-dd' value-format='yyyy-MM-dd' size='mini' v-model="searchForm.datevalue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-value="getDay"></el-date-picker>-->
					    <el-date-picker
					      v-model="datevalue"
					      type="daterange"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
					      value-format='yyyy-MM-dd'
					      :default-time="['00:00:00', '23:59:59']" size="mini"
					      :picker-options="pickerOptions"
					       class="wd260">
					    </el-date-picker>
					</div>
  				</el-form-item>
  				</div>
  				<div class="forminputdiv marginRight22">
  				<el-form-item label='账单类型'>
  					<template>
					  <el-select v-model="searchForm.operationType" placeholder="请选择" size='mini' class="wd150">
					    <el-option
					      v-for="item in options"
					      :key="item.id"
					      :label="item.label"
					      :value="item.id">
					    </el-option>
					  </el-select>
					</template>
  				</el-form-item>
  				</div>
  				<div class="forminputdiv">
  				<el-form-item label='搜　索' label-width='60px'>
					<template>
						<el-input class="wd260" type='text' size='mini' v-model='searchForm.searchTxt' placeholder='请输入对方名称/对方电话/对方账户信息'></el-input>
					</template>
				</el-form-item>
				</div>
				<div class="forminputdiv ml15">
				<el-form-btn>
					<el-button type='primary' size='mini' @click='toSearch'>搜索</el-button>
				</el-form-btn>
				</div>
			</el-form>		
		</div>
		
		<div class="tableWp">
			  <template>
			    <el-table
			      :data="tableList"
			      style="width: 100%">
			      <el-table-column prop="creationTime" label="时间" min-width="160"></el-table-column>
			      <el-table-column prop="operationType" label="账单类型" min-width="80">
			      	<template slot-scope='scope'>
			      		<p style="color: #389E0D;" v-if="scope.row.operationType==0">转入</p>
			      		<p style="color: red;" v-if="scope.row.operationType==1">提现</p>
			      		<p style="color: red;" v-if="scope.row.operationType==2">转出</p>
			      		<p style="color: red;" v-if="scope.row.operationType==3">打款</p>
			      		<p style="color: #389E0D;" v-if="scope.row.operationType==4">佣金发放</p>
			      		<p style="color: #389E0D;" v-if="scope.row.operationType==5">入金</p>
			      		<p style="color: #389E0D;" v-if="scope.row.operationType==6">代扣税</p>
			      	</template>
			      </el-table-column>
			      <el-table-column prop="money" label="总金额" min-width="110px" class="money" align='right'>
			      	<template slot-scope='scope'>
			      		<p style="color: red;" v-if="scope.row.operationType==1 || scope.row.operationType==2 || scope.row.operationType==3">-{{scope.row.money | moneydou}}</p>
			      		<p style="color: #389E0D;" v-else-if="scope.row.operationType==0 || scope.row.operationType==4 || scope.row.operationType==5 || scope.row.operationType==6">+{{scope.row.money | moneydou}}</p>
			      	</template>
			      </el-table-column>
			      <el-table-column prop="tax" label="代扣税金额" min-width="100px" class="money" align='right'>
			      	<template slot-scope='scope'>
			      		<p style="color: #389E0D;">+{{scope.row.tax | moneydou}}</p>
			      	</template>
			      </el-table-column>			      
			      <el-table-column prop="money" label="实际到账金额" min-width="110px" class="money" align='right'>
			      	<template slot-scope='scope'>
			      		<p style="color: #389E0D">{{scope.row.actionMoney | moneydou}}</p>
			      	</template>
			      </el-table-column>
			      <el-table-column prop="toUserName" label="对方名称"></el-table-column>
			      <el-table-column prop="toUserPhoneNumber" label="对方电话" min-width="110"></el-table-column>
			      <el-table-column prop="remark" label="对方账户信息" min-width="140">
			      	<template slot-scope='scope'>
			      		<p v-if="scope.row.accountInfo.length==2">
			      			{{scope.row.accountInfo[0]}} <br />
			      			<span style="color: #999999;">{{scope.row.accountInfo[1]}}</span>
			      		</p>
			      		<p v-if="scope.row.accountInfo.length==1">
			      			{{scope.row.accountInfo[0]}}
			      		</p>
			      	</template>
			      </el-table-column>
			      <el-table-column prop="balance" label="用户金额" min-width="100px" class="money" align='right'>
			      	<template slot-scope='scope'>
			      		<p>{{scope.row.balance | moneydou}}</p>
			      	</template>
			      </el-table-column>
			    </el-table>
			    <!--el循环列表数据end-->
              	<div v-if="tableList.length!=0" class='page-right'>
                	<el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>

              	</div>
			  </template>
		</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				loading:false,
				pickerOptions: {
		          shortcuts: [{
		            text: '最近一周',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近一个月',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
		              picker.$emit('pick', [start, end]);
		            }
		          }, {
		            text: '最近90天',
		            onClick(picker) {
		              const end = new Date();
		              const start = new Date();
		              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
		              picker.$emit('pick', [start, end]);
		            }
		          }]
		        },//快捷选项
				options:[{
		        	label:'全部',
		        	id:0
		        },{
		        	label:'转入',
		        	id:1
		        },{
		        	label:'转出',
		        	id:2
		        },{
		        	label:'提现',
		        	id:3
		        },{
		        	label:'打款',
		        	id:4
		        },{
		        	label:'佣金发放',
		        	id:5
		        }],
		        datevalue:[],
				searchForm:{
					
					operationType:0,
					searchTxt:''					
				},
		        
		        info:{
		        	name:'',
		        	phoneNumber:''
		        },
		        tableList:[],
		        currentPage:1,
		        userId:'',
				beginDate:'',
		        endDate:'',
		        getDay:'',
		        page:1,
		        namereturn:'',
		        queryreturn:{},
			}
		},
		mounted(){
			this.getDateChange();
			console.log(this.$route.query.name)
			if(this.$route.query.name){
				console.log(333)
				this.namereturn = this.$route.query.name;
				this.queryreturn = Object(this.$route.query.query);
			}
			
			this.userId = this.$route.query.userId;
			this.getInfo();
			if(this.$route.query.st){
				this.beginDate = this.$route.query.st;
			}
			if(this.$route.query.et){
				this.endDate = this.$route.query.et;
			}
			if(this.$route.query.type){
				this.searchForm.operationType = Number(this.$route.query.type);
			}
			if(this.$route.query.page){
				this.page = this.$route.query.page
			}
			if(this.$route.query.key){
				this.searchForm.searchTxt = this.$route.query.key
			}
			this.datevalue = [this.beginDate,this.endDate];
			
			this.getList();
		},
		watch: {
			
		    '$route' (to, from) {
		        this.page = this.$route.query.page;
		        this.userId = this.$route.query.userId;
				this.datevalue = [this.beginDate,this.endDate]
		    	if(this.$route.query.type){
					this.searchForm.operationType = Number(this.$route.query.type);
				}
		    	if(this.$route.query.key){
					this.searchForm.searchTxt = this.$route.query.key
				}
		        this.getList()
		    }	    
		},
		filters:{
			moneydou(val){
	        	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    } 
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }
			
			    return (((sign)?'':'-') + val + '.' + cents);
			}
		},
		
		
		methods:{
			getDateChange(){
	      		var changeDate = new Date();
	      		var changeYear = changeDate.getFullYear();
	      		var changeMonth = changeDate.getMonth()-2;
	      		var changeDay = changeDate.getDay();
	      		
	      		var changeMonth2 = changeDate.getMonth()+1;
	      		var changeDay2 = changeDate.getDate();
	      		
	      		this.getDay = changeYear + '-' + changeMonth + '-' + changeDay;
	      		this.beginDate = changeYear + '-' + changeMonth + '-' + '01';
	      		this.endDate = changeYear + '-' + changeMonth2 + '-' + changeDay2;
	      		console.log('787878')
	      		
	      	},
			getInfo(){
				let params={
					id:this.userId
				}
				this.post(params,'services/app/applets/GetAppUserBasisInfo').then(res=>{
					if (res.success) {
						this.info = res.result;
					}
				})
				
			},
			getList(){
				console.log('4444-------------')
				console.log(this.beginDate)
				this.beginDate = this.datevalue[0];
				this.endDate = this.datevalue[1];
				let params={
					userId:this.userId,
					pageIndex:this.page,
					beginDate:this.beginDate,
					endDate:this.endDate,
					operationType:this.searchForm.operationType,
					queryKey:this.searchForm.searchTxt
				}
				this.post(params,'services/app/applets/TransactionRecordByUser').then(res=>{
					if (res.success) {
						this.tableList = res.result.items;
						this.pagetotal = res.result.totalCount;
		            	this.currentPage= this.page
					}
				})
			},
			handleCurrentChange(val){
				this.beginDate = this.datevalue[0];
				this.endDate = this.datevalue[1];
				this.$router.push({
					name:'payuserdetail',
					query:{
						userId:this.userId,
						page:val,
						key:this.searchForm.searchTxt,
						st:this.beginDate,
						et:this.endDate,						
						type:this.searchForm.operationType
					}
				})
			},
			toSearch(){
				this.beginDate = this.datevalue[0];
				this.endDate = this.datevalue[1];
				this.$router.push({
					name:'payuserdetail',
					query:{
						userId:this.userId,
						page:1,
						key:this.searchForm.searchTxt,
						st:this.beginDate,
						et:this.endDate,
						type:this.searchForm.operationType
					}
				})
				
			},
			back(){
				console.log(this.namereturn);
				console.log(this.queryreturn)
				this.$router.push({
					name:this.namereturn,
					query:this.queryreturn
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.marginRight30{margin-right: 30px;}
.marginRight22{margin-right: 22px;}
.ml15{margin-left:15px;}
.wd260{width: 260px;}
.app-container{
.app-box{
	
	.p-detail {
      p {
        font-size: 18px;
        color: #333;
        margin: 0;
        margin-bottom: 30px;
        .now {
          color: #ee6000;
          font-size: 18px;
        }
      }
      .d-box {
        background: #eaf5fb;
        //width: 100%;
        padding: 15px 30px;
        p {
          margin: 0;
          span {
            font-size: 12px;
            color: #95bacc;
          }
          .d-setc {
            color: #2e94c5;
          }
          .isF:first-child {
            display: none;
          }
        }
        p:nth-of-type(1) {
          margin-bottom: 10px;
        }
      }
    }
    .searchForm{
    	padding: 30px 0 3px 0;
    	.forminputdiv{display: inline-block;}
    }
    .page-right{
        text-align: right;
        margin-top: 30px;padding-bottom: 0;
    }
}
}
</style>
<style type="text/css">
	.returnbtn .el-button{
		background: #fff;
    	border: 1px solid #dcdfe6;
    	border-color: #dcdfe6;
    	color: #606266;
	}
</style>